<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>down2演示页面</title>
    <!--ligerui-->
    <link rel="stylesheet" type="text/css" href="/static/ligerui/ligerUI/skins/Aqua/css/ligerui-all.css" />
    <link rel="stylesheet" type="text/css" href="/static/ligerui/ligerUI/skins/Gray/css/all.css" />
    <script type="text/javascript" src="/static/ligerui/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/static/ligerui/ligerUI/js/ligerui.all.js"></script>
    <script type="text/javascript" src="/static/ligerui/jquery.cookie.js"></script>
    <script type="text/javascript" src="/static/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/knockout.js" charset="utf-8"></script>
    <!--down2-->
    <link rel="stylesheet" type="text/css" href="/static/down2/down.css" />
    <script type="text/javascript" src="/static/down2/down.file.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/down2/down.folder.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/down2/down.edge.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/down2/down.app.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/down2/down.js" charset="utf-8"></script>
    <script type="text/javascript">

        $.ligerDefaults.Grid.formatters['format_control'] = function (num, column) {
            return '下载';
        }
        $.ligerDefaults.Grid.formatters['format_type'] = function (num, column) {
            return num ? '<img src="/static/down2/imgs/16/folder1.png" title="文件夹"/>' : '<img src="/static/down2/imgs/16/file1.png" title="文件"/>';
        }
        //根路径：http://localhost:8888/down2/db/
        var api = [
            window.location.protocol,
            "//",
            window.location.host,
            "/down2/"
        ].join("");
        function PageApp() {
            var _this = this;
            this.data = {
                downCur: null,
                sels: [],
                downer: new DownloaderMgr(
                    {
                        Folder: "",
                        //后端接口-文件
                        "UrlCreate": api+"f_create",
                        "UrlDel": api+"f_del",
                        "UrlList": api+"f_list",
                        "UrlListCmp": api+"f_list_cmp",
                        "UrlUpdate": api+"f_update",
                        "UrlDown": api+"f_down",
                        //后端接口-文件夹
                        "UrlFdData": api+"fd_data",
                        event:
                            {
                                ready: function () {
                                    _this.load_files();//加载未完成列表
                                },
                                folderSel: function () {
                                    _this.down_folderSel();
                                },//自动下载
                                fileAppend: function (f) {
                                    _this.down_fileAppend(f);
                                }
                            },
                        ui: { render: "downDiv" }
                    }
                )
            };
            this.ui = {
                table: null,
                btn: {
                    downs: null/*批量下载按钮*/
                },
                down: {
                    panel: null/*下载面板*/,
                    dlg: null/*弹出窗口*/
                }
            };

            //methods
            this.toolbar_downs_click = function () {
                if (_this.data.downer.Config["Folder"] == "") { _this.data.downer.openFolder(); return; }

                $.each(_this.data.sels, function (i, n) {
                    _this.data.downer.addTask(n);
                });
                _this.data.sels.length = 0;
            };
            this.toolbar_open_click = function () {
                this.open_down_dlg();
            };
            this.toolbar_click = function (it) {
                if (it.text == "批量下载") _this.toolbar_downs_click();
                if (it.text == "打开面板") _this.toolbar_open_click();
            };
            this.down_folderSel = function () {
                setTimeout(function () {
                    if (_this.data.downCur != null) _this.data.downer.addTask(_this.data.downCur);
                    _this.data.downCur = null;

                    $.each(_this.data.sels, function (i, n) {
                        _this.data.downer.addTask(n);
                    });
                    _this.data.sels.length = 0;
                }, 100);
            };
            this.down_fileAppend = function (f) {
                this.open_down_dlg();
                setTimeout(function () {
                    _this.data.downer.start_queue();
                }, 100);
            };
            this.load_files_cmp = function (fs) {
                //初始化表格
                app.ui.table = $("#filegrid").ligerGrid({
                    checkbox: true,//复选框支持
                    toolbar: {
                        items: [
                            { text: "批量下载", click: app.toolbar_click, img: '/static/down2/imgs/16/down.png' },
                            { text: "打开面板", click: app.toolbar_click, img: '/static/down2/imgs/16/show.png' }
                        ]
                    },
                    columns: [
                        { display: '类型', name: 'fdTask', align: 'left', width: 40, type: 'format_type' },
                        { display: '名称', name: 'nameLoc', align: 'left' },
                        { display: '文件大小', name: 'sizeSvr', align: 'right', width: 50 }
                    ],
                    width: 600,
                    pageSize: 30,
                    rownumbers: true,
                    data: { Rows: fs },
                    onCheckAllRow: function (ck) {
                        _this.data.sels.length = 0;
                        if (ck) {
                            var rows = _this.ui.table.getCheckedRows();
                            $.each(rows, function (i, n) {
                                _this.data.sels.push(n);
                            });
                        }
                    },
                    onCheckRow: function (checked, data, rowindex, rowobj) {
                        _this.data.sels.length = 0;
                        var rows = _this.ui.table.getCheckedRows();
                        $.each(rows, function (i, n) {
                            _this.data.sels.push(n);
                        });
                    }
                });
            };
            this.load_files = function () {
                $.ajax({
                    type: "GET"
                    , dataType: 'jsonp'
                    , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                    , url: this.data.downer.Config["UrlListCmp"]
                    , data: { uid: this.data.downer.Config.Fields["uid"], time: new Date().getTime() }
                    , success: function (msg) {
                        if (msg.value == null) {
                            $("#msg_load").hide();
                            return;
                        }

                        var files = JSON.parse(decodeURIComponent(msg.value));
                        app.load_files_cmp(files);//
                    }
                    , error: function (req, txt, err) { alert("加载上传数据失败！" + req.responseText); }
                    , complete: function (req, sta) { req = null; }
                });
            };
            this.open_down_dlg = function () {
                this.ui.down.panel.show();
                if (this.ui.down.dlg == null) {
                    this.ui.down.dlg = $.ligerDialog.open({
                        width: 462,
                        height: 522,
                        target: this.ui.down.panel,
                        showMax: false,
                        showMin: false,
                        slide: false,
                        modal: false,
                        isResize: true
                    });
                }
                else {
                    this.ui.down.dlg.show();
                }
            };

            this.ready = function () {
                this.ui.down.panel = $("#downDiv");
                this.ui.down.panel.hide();

                ko.applyBindings(_this);
            };
        }
        var app = new PageApp();

        $(function () {
            app.ready();
        });
    </script>
</head>
<body>
<p>此页为下载控件演示页面，与HttpUploader6配合使用。可以下载HttpUploader6数据库中的文件和文件夹</p>
<p><a href="/up6/clear" target="_blank">上传-清空数据库</a></p>
<p><a href="/up6/index" target="_blank">上传-多标签示例</a></p>
<p><a href="/up6/panel" target="_blank">上传-单面板示例</a></p>
<p><a href="/up6/single" target="_blank">上传-单文件示例</a></p>
<p><a href="/up6/vue" target="_blank">上传-vue示例</a></p>
<p><a href="/up6/layer" target="_blank">上传-layer弹窗示例</a></p>
<p><a href="/filemgr/index" target="_blank">文件管理器示例</a></p>
<p><a href="/down2/clear" target="_blank">下载-清空数据库</a></p>
<p><a href="/down2/index" target="_blank">下载-下载示例</a></p>
<p><a href="/down2/ligerui" target="_blank">下载-ligerui示例</a></p>
<!--ui-->
<div id="filegrid"></div>
<div id="downDiv"></div>
<div id="msg"></div>
</body>
</html>